<template>
  <div>
    <div v-if="isRouterList">
      <div class="thy_menu" v-for="(items, index) in arrayConversionFunc(routes).slice(0, 2)" :key="index">
        <div class="thy_menu_title" :class="{ borderTop: index != 0 }">
          <el-divider direction="vertical" class="dividerClass"></el-divider>
          <span>{{ items.identifying }}</span>
        </div>
        <div v-for="item in items.childs" :key="item.path">
          <div class="thy_menu_box">
            <div class="thy_menu_item" :class="[activeIndex == item.path ? 'thy_menu_active' : '']"
              @click="toPageClick(item, 1)">
              <svg-icon :icon-class="item.meta.icon ? item.meta.icon : ''" className="svgIcons"
                :style="{ color: item.iconColor ? item.iconColor : '' }"></svg-icon>
              <span>{{ item.meta.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="back">
        <div @click="goback">
          <svg-icon icon-class="back" />
          <span>返回</span>
        </div>
      </div>
      <div class="thy_menu" v-for="(items, index) in arrayConversionFunc(routes).slice(2)" :key="index">
        <div class="thy_menu_title" :class="{ borderTop: index != 0 }">
          <el-divider direction="vertical" class="dividerClass"></el-divider>
          <span>{{ items.identifying }}</span>
        </div>
        <div v-for="item in items.childs" :key="item.path">
          <div v-if="!item.hidden && judgeMenuIsHiddenFun(item)" class="thy_menu_box">
            <div class="thy_menu_item" :class="[activeIndex == item.path ? 'thy_menu_active' : '']"
              @click="toPageClick(item, 2)">
              <svg-icon :icon-class="item.meta.icon ? item.meta.icon : ''" className="svgIcons"
                :style="{ color: item.iconColor ? item.iconColor : '' }"></svg-icon>
              <span>{{ item.meta.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import usePermissionStore from '@/store/modules/permission'
import useUserStore from '@/store/modules/user'
import { useTeamRoleStore } from '@/store/modules/teamRole'
const teamRoleStore = useTeamRoleStore()
const userStore: any = useUserStore()

const permissionStore = usePermissionStore()
const sidebarRouters = computed<any[]>(() => permissionStore.getSidebarRoutes())
const activeIndex = ref('')
const route = useRoute()
const router = useRouter()
const isRouterList = ref(true)
const teamId = ref('')
const headNodeId = ref('')

const routes = computed(() => {
  let currentRoutes = { children: sidebarRouters.value }
  const matchedRoutes = route.matched

  for (let i = 0; i < matchedRoutes.length - 1; i++) {
    currentRoutes = currentRoutes.children.find((e: any) => {
      return e.name === matchedRoutes[i].name
    }) || { children: [] }
  }

  return currentRoutes.children
})




const toPageClick = (item: { path: string }, type: number) => {
  const pathArr = route.path.split('/')
  pathArr[pathArr.length - 1] = item.path
  if (type == 2) {
    const path = pathArr.join("/") + `?headNodeId=${headNodeId.value}&teamId=${teamId.value}`
    router.push(path)
  } else {
    const path = pathArr.join('/')
    router.push(path)

  }
}

const arrayConversionFunc = (arr1: any) => {
  const arr = []
  // console.log(arr1, "arr1");
  arr1.forEach((item) => {
    const parent = arr.find((cur) => cur.identifying === item.identifying)
    if (parent) {
      // console.log(item);
      if (!item.hidden) {
        parent.childs.push(item)
      }
    } else {
      if (!item.hidden) {
        const obj = {
          identifying: item.identifying,
          childs: [item]
        }

        arr.push(obj)
      }
    }
  })
  // console.log(arr);
  return arr
}
// 页面显示方法
const itemPageFunc = (item: any) => {
  // 摆渡页面单独的配置
  // if (item.path == 'document-ferry') {
  //   return !item.hidden && userStore?.ferrySwitch
  // } else {
  //   return !item.hidden
  // }
}
const goback = () => {
  router.push('/newUi/teamKnowdge/teamDoc')
}
const judgeMenuIsHiddenFun = (item: any) => {
  if (item.path == "teamRole" || item.path == "teamSetting") {
    if (teamRoleStore.roleDataMenu.rank == 1) {
      return true
    } else {
      return false
    }
  } else {
    return true
  }
}
// 监听路由变化
watch(route, (newRoute, oldRoute) => {
  const valArr = newRoute.path.split('/')
  teamId.value = newRoute.query.teamId?.toString()
  headNodeId.value = newRoute.query.headNodeId?.toString()
  activeIndex.value = valArr[valArr.length - 1]

  let arrCharden = arrayConversionFunc(routes.value).slice(2)

  for (let i = 0; i < arrCharden.length; i++) {
    const element = arrCharden[i]

    // console.log(element.childs.findIndex((cur) => cur.path === valArr[valArr.length - 1]),'123')
    if (element.childs.findIndex((cur) => cur.path === valArr[valArr.length - 1]) != -1) {
      isRouterList.value = false
      break
    }
  }
  if (teamId.value) {
    teamRoleStore.getUserTeamRoleApi({
      teamId: teamId.value,
      userId: userStore.userId
    })
  }
}, { deep: true, immediate: true })
</script>

<style scoped lang="scss">
.pageBox {
  display: flex;
  width: 100%;
  height: calc(100vh - 50px);

  .pageLeft {
    width: 260px;
    height: 100%;
    border-right: 1px solid #eee;

    .thy_menu {
      .borderTop {
        border-top: 1px solid #f5f5f5;
      }
    }

    .thy_menu_title {
      width: 100%;
      padding: 18px 20px;
      color: #999;
      font-size: 13px;
      display: flex;
      align-items: center;
    }

    .dividerClass {
      width: 3px;
      border-radius: 2px;
      margin: 0 6px 0 2px;
      height: 16px;
      background-color: #6698ff;
    }

    .thy_menu_item {
      width: 100%;
      padding: 11px 20px;
      color: #333333;
      font-size: 15px;
      cursor: pointer;
      margin-bottom: 8px;
      display: flex;
      align-items: center;

      &:hover {
        background-color: #f5f5f5;
      }
    }

    .thy_menu_active {
      background-color: rgba(102, 152, 255, 0.1);
      color: #6698ff;
    }

    .svgIcons {
      font-size: 15px;
      vertical-align: middle;
      margin-right: 10px;
      margin-left: 4px;
    }
  }

  .pageRight {
    width: calc(100% - 260px);
  }
}

.back {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 15px;
  padding: 2px 20px 16px;
  border-bottom: 1px solid #f5f5f5;

  div {
    cursor: pointer;
  }

  span {
    margin-left: 6px;
  }
}
</style>
